<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>自动化CI连跑分析页</title>

    <style type="text/css">
        LogTitle {
            display: block;
            background-color: #b6d7a8;
            font-size: 20px;
            padding: 10px;
        }

        .ms-drop li {
            line-height: 18px;
        }

        .ms-drop span {
            margin-left: 5px;
        }

    </style>
</head>

<body>
{% extends 'base.html' %}
{% block body_part %}
{% load static %}
<LogTitle><em><b>图形分析</b></em></LogTitle>
<div id="images">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4" style="float: left;">
                <div class="echarts" id="issue_pie"
                     style="width: 100%; height:350px; margin: 0 auto"></div>
            </div>

            <div class="col-md-4">
                <div class="echarts" id="bug_pie"
                     style="width: 90%; height:350px; margin: 0 auto"></div>
            </div>

            <div class="col-md-4" style="float: right;">
                <div class="echarts" id="bug_priority_pie"
                     style="width: 100%; height:350px; margin: 0 auto"></div>
            </div>
        </div>
    </div>
</div>
<p></p>
<div id="mytable">
    <LogTitle><em><b>issue详情</b></em></LogTitle>
    <div class="container-fluid">
        <div class="row" style="margin-top: 5px">
            <div class="col-md-1">
                <label style="color:black;float:left;font-size:16px;">
                    当前DI:
                </label>
                <p id="di_value"
                   style="margin-left:80px; font-size:16px;font-style: italic;font-weight: bold"></p>
            </div>
            <div class="col-md-2">
                <label style="color:black;font-size:16px;float: right">
                    数据更新于:
                </label>
            </div>
            <div class="col-md-2">
                <p id="last_update_time"
                   style="float: left;font-size:16px;font-style: italic;font-weight: bold">
                </p>
            </div>
        </div>

        <div>
            <p
                    style="background-color:AntiqueWhite;font-family:arial;color:black;font-size:16px;font-weight:bold;padding:5px;">
                责任人详情表</p>
            <table id="tester_table" class="table table-hover"></table>
        </div>

        <div style="float: left; margin-top: 10px;">
            <p
                    style="background-color:AntiqueWhite;font-family:arial;color:black;font-size:16px;font-weight:bold;padding:5px;">
                issues详情表</p>
            <form class="form-inline" role="form" id="toolbar">
                <div class="form-group">
                    <label style="color: black;margin-left: 10px;">
                        过滤开始日期
                    </label>
                    <input type="text" autocomplete="off"
                           class="form-control start_datetime"
                           placeholder="过滤开始日期"
                           name="create_time" id="create_time">
                    <label style="color: black;margin-left: 10px;">
                        过滤结束日期
                    </label>
                    <input type="text" autocomplete="off"
                           class="form-control end_datetime"
                           placeholder="过滤结束日期"
                           name="end_time" id="end_time">

                    <label style="color: black;margin-left: 10px;">
                        创建人:
                    </label>
                    <select name="create_user" id="create_user"
                            multiple="multiple">
                        <option>郝梦</option>
                        <option>张欢</option>
                        <option>裴琳倩</option>
                        <option>宁雅黎</option>
                        <option>侯少龙</option>
                        <option>屈敏</option>
                        <option>王香香</option>
                        <option>郭维彪</option>
                        <option>仇颖</option>
                        <option>李岩松</option>
                        <option>张翱</option>
                        <option>姚康</option>
                        <option>白小丽</option>
                        <option>成嘉琦</option>
                        <option>王珂</option>
                        <option>李卓</option>
                        <option>雷帅</option>
                        <option>邹佳良</option>
                        <option>夏琦</option>
                        <option>邹佳良</option>
                        <option>李鑫</option>
                        <option>雷彦斌</option>
                        <option>李鸿基</option>
                        <option>李春龙</option>
                        <option>杨毅翔</option>
                        <option>杨若兰</option>
                        <option>张航</option>
                        <option>程瑶</option>
                        <option>宋晶</option>
                    </select>

                    <label style="color: black;margin-left: 10px;">
                        责任人:
                    </label>
                    <input type="text" class="form-control"
                           name="owner"
                           id="owner" placeholder="请输入责任人">

                    <label style="color: black;margin-left: 10px;">
                        bug状态
                    </label>
                    <select name="select_bug_status" id="select_bug_status"
                            multiple="multiple">
                        <option>待办的</option>
                        <option>已确认</option>
                        <option>挂起</option>
                        <option>修复中</option>
                        <option>已完成</option>
                        <option>已验收</option>
                        <option>已取消</option>
                    </select>

                    <label style="color: black;margin-left: 10px;">
                        优先级
                    </label>
                    <select name="select_bug_priority"
                            id="select_bug_priority" multiple="multiple">
                        <option>严重</option>
                        <option>主要</option>
                        <option>次要</option>
                        <option>不重要</option>
                        <option>无优先级</option>
                    </select>
                    <label style="color: black;margin-left: 10px;">
                        ISSUE单号:
                    </label>
                    <input type="text" class="form-control"
                           name="issue_id"
                           id="issue_id" placeholder="请输入issueID">
                    <button type="button" class="btn btn-default"
                            id="query_btn">
                        查询
                    </button>
                </div>
            </form>
            <div>
                <table id="issue_table" class="table table-hover"></table>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
        $('#create_user').multipleSelect({
            selectAll: true, //是否显示全部复选框，默认显示
            selectAllText: "选择全部", //选择全部的复选框的text值
            allSelected: "全部", //全部选中后显示的值
            placeholder: "请选择"
        });

        $('#select_bug_status').multipleSelect({
            selectAll: true,
            selectAllText: "选择全部",
            allSelected: "全部",
            placeholder: "请选择"
        });

        $('#select_bug_priority').multipleSelect({
            selectAll: true,
            selectAllText: "选择全部",
            allSelected: "全部",
            placeholder: "请选择"
        });

        $("#create_time").datetimepicker({
            language: "zh-CN",
            format: "yyyy-mm-dd hh:ii:ss",
            minView: "hour",
            autoclose: true,
            todayBtn: true
        }).on("changeDate", function (ev) {
            if (ev.date) {
                $("#end_time").datetimepicker('setStartDate', new Date(ev.date.valueOf()));
            } else {
                $("#end_time").datetimepicker('setStartDate', null);
            }
        });

        $("#end_time").datetimepicker({
            language: "zh-CN",
            format: "yyyy-mm-dd hh:ii:ss",
            minView: "hour",
            autoclose: true,
            todayBtn: true
        }).on("changeDate", function (ev) {
            if (ev.date) {
                $("#create_time").datetimepicker('setEndDate', new Date(ev.date.valueOf()));
            } else {
                $("#create_time").datetimepicker('setEndDate', new Date());
            }
        });
        $("#query_btn").click(function () {
            $('#issue_table').bootstrapTable('refreshOptions', { pageNumber: 1, pageSize: 25 });
        });

        var tester_table = $("#tester_table");
        tester_table.bootstrapTable("destroy").bootstrapTable({
            url: "{% url 'get_owner_data' %}",
            datatype: 'json',
            sidePagination: "server",
            method: 'get',
            striped: true,
            cache: false,
            pagination: true,
            sortable: true,
            sortOrder: "asc",
            pageNumber: 1,
            pageSize: 5,
            pageList: [5, 10, 25, 50, 100],
            search: false,
            strictSearch: true,
            minimumCountColumns: 2,
            clickToSelect: true,
            uniqueId: "ID",
            showToggle: false,
            cardView: false,
            detailView: false,
            columns: [{
                field: "owner",
                title: "责任人",
                align: 'center',
                width: "5%",
                sortable: false
            }, {
                field: "bugs_count",
                title: "提单数",
                align: 'center',
                width: "5%",
                sortable: false,
            }, {
                field: "no_verified_count",
                title: "未回归",
                align: 'center',
                width: "5%",
                sortable: false,
            }, {
                field: "non_standard_count",
                title: "不规范",
                align: 'center',
                width: "5%",
                sortable: false,
            }],
            queryParams: function (params) {
                var temp = {
                    limit: params.limit,
                    offset: params.offset,
                };
                return temp;
            }
        });

        var issue_table = $("#issue_table");
        issue_table.bootstrapTable("destroy").bootstrapTable({
            url: "{% url 'get_issues_detail_data' %}",
            dataType: "json",
            method: 'get',
            toolbar: '#toolbar',
            striped: true,
            cache: false,
            pagination: true,
            sortable: true,
            sortOrder: "asc",
            sidePagination: "server",
            pageNumber: 1,
            pageSize: 25,
            pageList: [10, 25, 50, 100, 1000, 2000],
            search: false,
            strictSearch: true,
            showColumns: true,
            showRefresh: true,
            minimumCountColumns: 2,
            clickToSelect: true,
            uniqueId: "ID",
            showToggle: false,
            cardView: false,
            detailView: false,
            contentType: "application/x-www-form-urlencoded",
            columns: [{
                field: "issue_no",
                title: "ISSUE ID",
                align: 'center',
                width: "5%",
                sortable: false
            }, {
                field: "project",
                title: "类别",
                align: 'center',
                width: "5%",
                sortable: false,
                visible: false
            }, {
                field: "title",
                title: "标题",
                align: 'center',
                width: "5%",
                sortable: false,
            }, {
                field: "priority",
                title: "优先级",
                align: 'center',
                width: "5%",
                sortable: false,
            }, {
                field: "di",
                title: "DI",
                align: 'center',
                width: "5%",
                sortable: false,
            }, {
                field: "creator",
                title: "创建人",
                align: 'center',
                width: "5%",
                sortable: false,
            }, {
                field: "assignee",
                title: "责任人",
                align: 'center',
                width: "5%",
                sortable: false,
            }, {
                field: "link",
                title: "链接",
                align: 'center',
                width: "5%",
                sortable: false,
                formatter: function (value, row, index) {
                    return "<a href=\"" + value + "\" target=\"_blank\">" + value + "</a>";
                }
            }, {
                field: "state",
                title: "状态",
                align: 'center',
                width: "5%",
                sortable: false,
            }, {
                field: "create_time",
                title: "创建时间",
                align: 'center',
                width: "5%",
                sortable: false,
            }],
            queryParams: function (params) {
                var temp = {
                    limit: params.limit,
                    offset: params.offset,
                    sort: params.sort,
                    order: params.order,
                    create_user: $.trim($('#create_user').val()),
                    owner: $.trim($('#owner').val()),
                    select_bug_status: $.trim($('#select_bug_status').val()),
                    select_bug_priority: $.trim($('#select_bug_priority').val()),
                    create_time: $("#create_time").val(),
                    end_time: $("#end_time").val(),
                    issue_id: $.trim($('#issue_id').val())
                };
                return temp;
            }
        });

        var issue_pie = echarts.init(document.getElementById('issue_pie'));
        $(document).ready(function () {
            $.get("{% url 'get_bugs_data' %}", function (data, status) {
                var legend_data = [];
                var json_data = JSON.parse(data);
                var di = document.getElementById("di_value")
                di.innerHTML = json_data.di;
                var last_update_time = document.getElementById("last_update_time");
                last_update_time.innerHTML = json_data.last_update_time;
                for (var i in json_data.issue_pie) {
                    legend_data.push(json_data.issue_pie[i]['name']);
                }
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        y: 'top',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: ' left',
                                    fontSize: 14,
                                }
                            }
                        },
                        data: legend_data
                    },
                    title: {
                        text: 'issue类别占比饼图',
                        x: 'center',
                        y: 'top'
                    },
                    series: [{
                        name: 'issue类别',
                        type: 'pie',
                        avoidLabelOverlap: true,
                        selectedMode: 'single',
                        radius: ['0', '70%'],
                        center: ['50%', '53%'],
                        data: json_data.issue_pie,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'right',
                                    fontSize: 14,
                                    formatter: "{b}: \n{c} ({d}%)"
                                }
                            }
                        }
                    }]
                };
                issue_pie.setOption(option);

                var bug_pie = echarts.init(document.getElementById('bug_pie'));
                var legend_data = [];
                for (var i in json_data.bug_pie) {
                    legend_data.push(json_data.bug_pie[i]['name']);
                }
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        y: 'top',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: ' left',
                                    fontSize: 14,
                                }
                            }
                        },
                        data: legend_data
                    },
                    title: {
                        text: 'bug状态占比饼图',
                        x: 'center',
                        y: 'top'
                    },
                    series: [{
                        name: 'bug状态',
                        type: 'pie',
                        avoidLabelOverlap: true,
                        selectedMode: 'single',
                        radius: ['0', '70%'],
                        center: ['50%', '53%'],
                        data: json_data.bug_pie,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'right',
                                    fontSize: 14,
                                    formatter: "{b}: \n{c} ({d}%)"
                                }
                            }
                        }
                    }]
                };
                bug_pie.setOption(option);

                var bug_priority_pie = echarts.init(document.getElementById('bug_priority_pie'));
                var legend_data = [];
                for (var i in json_data.bug_priority_pie) {
                    legend_data.push(json_data.bug_priority_pie[i]['name']);
                }
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        y: 'top',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: ' left',
                                    fontSize: 14,
                                }
                            }
                        },
                        data: legend_data
                    },
                    title: {
                        text: 'bug优先级占比饼图',
                        x: 'center',
                        y: 'top'
                    },
                    series: [{
                        name: 'bug优先级',
                        type: 'pie',
                        avoidLabelOverlap: true,
                        selectedMode: 'single',
                        radius: ['0', '70%'],
                        center: ['50%', '53%'],
                        data: json_data.bug_priority_pie,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'right',
                                    fontSize: 14,
                                    formatter: "{b}: \n{c} ({d}%)"
                                }
                            }
                        }
                    }]
                };
                bug_priority_pie.setOption(option);
            })
        })


</script>
{% endblock %}
</body>

</html>